<template>
	<div class="allmargin report-container">
		<div class="bg"></div>
		<div class="ps">
			<el-form
				ref="form"
				:inline="true"
				label-width="auto"
				:model="queryData"
				@submit.native.prevent
			>
				<el-form-item
					:label="$t('common.choose_merchant') + ':'"
					prop="merchantId"
					:rules="[
						{
							required: true,
							message: $t('agent.rule_select_tip_merchant'),
							trigger: 'blur'
						}
					]"
				>
					<merchant-select
						v-model="queryData.merchantId"
						:placeholder="$t('common.please_choose')"
					></merchant-select>
				</el-form-item>

				<el-form-item
					:label="$t('agent.agent_account') + ':'"
					prop="userName"
					:rules="[
						// {
						// 	required: true,
						// 	message: $t('agent.rule_input_tip_account'),
						// 	trigger: 'blur'
						// },
						{
							min: 4,
							max: 12,
							message: $t('agent.rule_length_tip4-12'),
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model.trim="queryData.userName"
						clearable
						size="medium"
						:maxlength="11"
						:placeholder="$t('agent.rule_input_tip_account')"
						:disabled="loading"
						@keyup.enter.native="enterSearch"
					></el-input>
				</el-form-item>
				<el-form-item
					label="合营码"
					prop="joinCode"
					:rules="[
						// {
						// 	required: true,
						// 	message: $t('agent.rule_input_tip_account'),
						// 	trigger: 'blur'
						// },
						{
							min: 4,
							max: 11,
							message: $t('agent.rule_length_tip4-12'),
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model.trim="queryData.joinCode"
						clearable
						size="medium"
						:maxlength="11"
						placeholder="请输入合营码"
						:disabled="loading"
						@keyup.enter.native="enterSearch"
					></el-input>
				</el-form-item>
				<el-form-item style="margin-left: 30px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="query"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
			<el-tabs
				v-show="isShow"
				key="agentDetails"
				v-model="proxyActiveName"
				@tab-click="handleClick"
			>
				<el-tab-pane
					v-if="hasPermission('201038')"
					key="basicInfor"
					:label="$t('agent.basic_info')"
					name="basicInfor"
				>
					<basicInfor
						ref="basicInfor"
						class="floor-item"
						:agentData="agentData"
						:parentData="parentData"
						:outlineInfo="outlineInfo"
						:remarksTableData="remarksTableData"
						@basicInforFn="query"
					></basicInfor>
				</el-tab-pane>
				<el-tab-pane
					key="pointInfo"
					v-if="hasPermission('201034')"
					label="比例信息"
					name="pointInfo"
				>
					<rebateInfo
						v-if="proxyActiveName === 'pointInfo'"
						ref="pointInfo"
						class="floor-item"
						:agentData="agentData"
					></rebateInfo>
				</el-tab-pane>
				<!-- 契约信息 -->
				<!-- <el-tab-pane
					v-if="hasPermission('201034')"
					key="contractInfor"
					:label="$t('agent.contract_info')"
					name="contractInfor"
					class="nav-list-item"
				>
					<contractInfor
						v-if="proxyActiveName === 'contractInfor'"
						ref="contractInfor"
						:parentData="parentData"
						:contranctInforData="contranctInforData"
						:commissionContractList="commissionContractList"
						:rebateContractList="rebateContractList"
						class="floor-item"
						@getInfo="query"
					></contractInfor>
				</el-tab-pane> -->
				<el-tab-pane
					v-if="hasPermission('201035')"
					key="financialInfor"
					:label="$t('agent.financial_info')"
					name="financialInfor"
					class="nav-list-item"
				>
					<financialInfor
						v-if="proxyActiveName === 'financialInfor'"
						ref="financialInfor"
						class="floor-item"
						:proxyLevel="proxyLevel"
						:parentData="parentData"
						:balanceList="balanceList"
						:financialInforList="financialInforList"
					></financialInfor>
				</el-tab-pane>
				<el-tab-pane
					v-if="hasPermission('201021')"
					key="teamInfor"
					:label="$t('agent.team_info')"
					name="teamInfor"
					class="nav-list-item"
				>
					<teamInfor
						v-if="proxyActiveName === 'teamInfor'"
						ref="teamInfor"
						class="floor-item"
						:parentData="parentData"
						:teamInforList="teamInforList"
					></teamInfor>
				</el-tab-pane>
				<el-tab-pane
					v-if="hasPermission('201036')"
					key="loginInfor"
					:label="$t('agent.login_info')"
					name="loginInfor"
					class="nav-list-item"
				>
					<loginInfor
						v-if="proxyActiveName === 'loginInfor'"
						ref="loginInfor"
						class="floor-item"
						:parentData="parentData"
						:lonRecord="lonRecord"
					></loginInfor>
				</el-tab-pane>
				<el-tab-pane
					v-if="
						hasPermission('90630045') && (agentData.proxyLevel === 0 || agentData.subAccountEnable === 1)
					"
					key="assistanAccount"
					:label="'助理账号列表'"
					name="assistanAccount"
					class="nav-list-item"
				>
					<assistanAccount
						v-if="proxyActiveName === 'assistanAccount'"
						ref="assistanAccount"
						class="floor-item"
						:parentData="parentData"
						:lonRecord="lonRecord"
					></assistanAccount>
				</el-tab-pane>
				<el-tab-pane
					v-if="
						hasPermission('90630046') && (agentData.proxyLevel === 0 || agentData.subAccountEnable === 1)
					"
					key="assistantRole"
					:label="'助理角色列表'"
					name="assistantRole"
					class="nav-list-item"
				>
					<assistantRole
						v-if="proxyActiveName === 'assistantRole'"
						ref="assistantRole"
						class="floor-item"
						:parentData="parentData"
						:lonRecord="lonRecocrd"
					></assistantRole>
				</el-tab-pane>
				<el-tab-pane
					v-if="hasPermission('909330490') && agentData.proxyLevel === 0"
					key="subAgents"
					:label="'助理账号权限'"
					name="subAgents"
					class="nav-list-item"
					
				>
					<subAgents
						v-if="proxyActiveName === 'subAgents'"
						ref="assistantRole"
						class="floor-item"
						:parentData="parentData"
						:lonRecord="lonRecocrd"
					></subAgents>
				</el-tab-pane>
				<el-tab-pane
					key="windControllerCredit"
					:label="'风控信息'"
					name="windControllerCredit"
					class="nav-list-item"
				>
					<windControllerCredit
						v-if="proxyActiveName === 'windControllerCredit'"
						ref="assistantRole"
						class="floor-item"
						:parentData="parentData"
						:lonRecord="lonRecord"
						:outlineInfo="outlineInfo"
						:remarksTableData="remarksTableData"
					></windControllerCredit>
				</el-tab-pane>
			</el-tabs>
			<el-empty
				v-show="!isShow"
				:description="$t('agent.no_data')"
			></el-empty>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import basicInfor from './components/basicInfor'
import financialInfor from './components/financialInfor'
import teamInfor from './components/teamInfor'
import loginInfor from './components/loginInfor'
import rebateInfo from './components/rebateInfo'
import assistanAccount from './components/assistanAccount'
import assistantRole from './components/assistantRole'
import { routerNames } from '@/utils/consts'
import { mapGetters } from 'vuex'
import windControllerCredit from './components/windControllerCredit'
import subAgents from './components/subAgents'

export default {
	name: routerNames.agentDetails,
	components: {
		basicInfor,
		financialInfor,
		teamInfor,
		loginInfor,
		rebateInfo,
		assistantRole,
		assistanAccount,
		windControllerCredit,
		subAgents
	},
	mixins: [list],
	data() {
		this.enterSearch = this.throttle(this.enterSearch, 1000)
		this.query = this.throttle(this.query, 1000)
		return {
			isShow: false,
			agentData: {},
			parentData: { userName: '', userId: '', joinCode: undefined },
			queryData: {
				userName: '',
				userId: '',
				merchantId: ''
			},
			proxyLevel: 1,
			examineFlag: [],
			proxyActiveName: 'basicInfor',
			tabList: [],
			roleList: [
				{ id: '1040123', ref: 'basicInfor' },
				{ id: '1040124', ref: 'banker' },
				{ id: '1040125', ref: 'contractInfor' },
				{ id: '1040126', ref: 'financialInfor' },
				{ id: '1040127', ref: 'teamInfor' },
				{ id: '1040128', ref: 'loginInfor' }
			], // 权限
			roleIds: [],
			outlineInfo: {}, // 基本信息
			bankerList: {}, // 私庄概览
			capitalList: {}, // 资金使用率
			remarksTableData: {}, // 备注表格
			balanceList: {}, // 代理余额
			financialInforList: {}, // 财务信息
			teamInforList: {}, // 团队信息
			lonRecord: {}, // 登录信息
			commissionContractList: [], // 佣金契约
			rebateContractList: [], // 返点信息
			contranctInforData: {
				id: '',
				contractStatus: '', // 是否签约
				contractModel: '', // 契约模式
				commissionPolicyTypeId: '', // 佣金 id
				rebatePolicyTypeId: '', // 返点 id
				commissionContractId: '',
				rebateContractId: ''
			} // 契约信息
		}
	},
	computed: {
		...mapGetters(['merchantList', 'merchantInfo']),
		currencySymbol() {
			const merchantId = this.queryData.merchantId
			const merchantInfo = this.merchantList.find(
				(item) => item.id === merchantId
			)
			return merchantInfo ? merchantInfo.currencySymbol : '¥'
		}
	},
	watch: {
		$route: {
			handler(route) {
				const { query } = route
				if (query && query.userName && query.merchantId) {
					if (query.merchantId && query.userName) {
						setTimeout(async () => {
							this.queryData.merchantId =
								query.merchantId || undefined
							this.queryData.userName =
								query.userName || undefined
							await this.getProxyDetailQueryDetail(this.queryData)

							this.proxyActiveName =
								query.proxyActiveName || 'basicInfor'
						}, 200)
					}
				}
			},
			immediate: true
		}
	},
	created() {
		if (this.merchantInfo) {
			this.queryData.merchantId = this.merchantInfo.id
		}
	},
	methods: {
		ids(val) {
			for (let i = 0; i < val.length; i++) {
				const id = val[i].id
				this.roleIds.push(id)
			}
		},
		// 代理详情-基本信息-概要信息以及个人资料
		getProxyDetailQueryDetail(val) {
			this.outlineInfo = {}
			return this.$api
				.getProxyDetailQueryDetail({
					userName: val.userName,
					merchantId: val.merchantId,
					joinCode: val.joinCode
				})
				.then((res) => {
					if (res?.code === 200 && res.data) {
						this.proxyLevel = res.data.proxyLevel
						this.outlineInfo = res.data
						this.agentData = res.data
						const {
							id,
							auditList,
							contractStatus,
							contractModel,
							commissionPolicyTypeId,
							rebatePolicyTypeId,
							commissionContractId,
							rebateContractId,
							merchantId
						} = res.data
						this.contranctInforData = {
							id,
							contractStatus,
							contractModel,
							commissionPolicyTypeId,
							rebatePolicyTypeId,
							commissionContractId,
							rebateContractId,
							merchantId
						}
						this.parentData = {
							...res.data,
							userId: id,
							currencySymbol: this.currencySymbol
						}
						this.examineFlag = []
						if (auditList && auditList !== null) {
							for (let i = 0; i < auditList.length; i++) {
								const ele = auditList[i]
								this.examineFlag.push(ele.applyName)
							}
						} else {
							this.examineFlag = []
						}

						this.proxyActiveName =
								this.$route.query.proxyActiveName || 'basicInfor'
						// 判断是否有tab页签权限   如果没有权限时不调tab页签模块相关接口
						// this.roleIds.find((item) => {
						// 	switch (item) {
						// 		case '1040123':
						// 			this.getProxyDetailRemark(id)
						// 			break
						// 		case '1040124':
						// 			this.getProxyDetailBankerInfo(id)
						// 			this.getProxyProxyBillDetailInfo(id)
						// 			break
						// 		case '1040125':
						// 			this.getProxyProxyDetailContract(
						// 				commissionContractId,
						// 				rebateContractId
						// 			)
						// 			break
						// 		case '1040126':
						// 			this.getProxyDataBalance(id)
						// 			this.getProxyDetailFinanceInfo(id)
						// 			break
						// 		case '1040127':
						// 			this.getProxyDetailTeamInfo(id)
						// 			break
						// 		case '1040128':
						// 			this.getProxyDetailTeamInfo(id)
						// 			this.getProxyDetailProxyLoginLog(id)
						// 			break
						// 		default:
						// 			break
						// 	}
						// })
					} else {
						this.isShow = false
						const msg =
							res?.msg || this.$t('agent.interface_exceptions')
						this.$message.success(msg)
					}
					this.isShow = true
				})
				.catch((e) => {
					this.isShow = false
				})
		},
		// 私庄信息
		getProxyDetailBankerInfo(val) {
			this.bankerList = {}
			const params = { userId: val }
			this.$api.getProxyDetailBankerInfo(params).then((res) => {
				if (res?.code === 200 && res.data) {
					this.bankerList = res.data
				}
			})
		},
		// 资金使用率
		getProxyProxyBillDetailInfo(val) {
			this.capitalList = {}
			const params = { userId: val }
			this.$api.getProxyProxyBillDetailInfo(params).then((res) => {
				if (res?.code === 200 && res.data) {
					this.capitalList = res.data
				}
			})
		},
		// 备注信息
		getProxyDetailRemark(val) {
			this.remarksTableData = {}
			const params = { userId: val, pageNum: 1, pageSize: 3 }
			this.$api.getProxyDetailRemark(params).then((res) => {
				if (res?.code === 200 && res.data) {
					this.remarksTableData = res.data
				}
			})
		},
		// 代理余额
		getProxyDataBalance(val) {
			this.balanceList = {}
			const params = { userId: val }
			this.$api.getProxyDataBalance(params).then((res) => {
				if (res?.code === 200 && res.data) {
					this.balanceList = res.data
				}
			})
		},
		// 财务信息
		getProxyDetailFinanceInfo(val) {
			this.financialInforList = {}
			const params = { userId: val }
			this.$api.getProxyDetailFinanceInfo(params).then((res) => {
				if (res?.code === 200) {
					this.financialInforList = res?.data || {}
				}
			})
		},
		// 团队信息
		getProxyDetailTeamInfo(val) {
			this.teamInforList = {}
			const params = { userId: val }
			this.$api.getProxyDetailTeamInfo(params).then((res) => {
				if (res?.code === 200 && res.data) {
					this.teamInforList = res.data
				}
			})
		},
		// 登录日志
		getProxyDetailProxyLoginLog(val) {
			this.lonRecord = {}
			const params = { userId: val, pageNum: 1, pageSize: 100 }
			this.$api.getProxyDetailProxyLoginLog(params).then((res) => {
				if (res?.code === 200 && res.data) {
					this.lonRecord = res.data
				}
			})
		},
		// 佣金契约/返点契约
		getProxyProxyDetailContract(c, r) {
			this.commissionContractList = []
			this.rebateContractList = []
			const Com = { commissionContractId: c, pageNum: 1, pageSize: 100 }
			const Reb = { rebateContractId: r, pageNum: 1, pageSize: 100 }
			this.$api.getProxyProxyDetailContract(Com).then((res) => {
				if (res?.code === 200 && res.data) {
					this.commissionContractList = res.data.commissionResp || []
				}
			})
			this.$api.getProxyProxyDetailContract(Reb).then((res) => {
				if (res?.code === 200 && res.data) {
					this.rebateContractList = res.data.rebateResp || []
				}
			})
		},
		query() {
			const params = this.queryData
			this.$refs.form.validate((valid) => {
				if (valid) {
					if (!params.userName && !params.joinCode) {
						this.$message.error('请输入代理账号或者合营码')
						return
					}
					this.getProxyDetailQueryDetail(params)
				}
			})
		},

		enterSearch() {
			this.query()
		},
		reset() {
			this.$refs.form.resetFields()
			if (!this.merchantInfo) {
				this.queryData = {}
			} else {
				this.queryData = {
					merchantId: this.merchantInfo.id
				}
			}
			this.proxyActiveName = 'basicInfor'
			this.isShow = false
		},
		handleClick(tab, event) {}
	}
}
</script>

<style lang="scss" scoped>
.allmargin {
	margin: 9px 15px 15px 15px;
}

.bg {
	width: 100%;
	height: 15px;
}

.vi_VN,
.en_US {
	::v-deep .table-wrapper {
		width: 1700px;
	}
}
</style>
